/* eslint-disable import/first */
import React from 'react';
import { Form, Input,
  Icon, Modal, Alert,
  Button, InputNumber,
  DatePicker } from 'antd';
import moment from 'moment';
import * as DateUtils from '../../utils/dateUtils';

const FormItem = Form.Item;

class UpdateUser extends React.Component {
  state = {
    visible: false,
    foramtDate: 'YYYY-MM-DD hh:mm:ss',
    foramtDateUtils: 'yyyy-MM-dd hh:mm:ss',
    showNoUpdate: false,
    showLog: false,
  };
  onChange = () => {
    this.setState({
      showNoUpdate: false,
      showLog: false,
    });
  };
  handleOk = () => {
    const { form, updateUser, record } = this.props;
    this.setState({
      confirmLoading: true,
    });
    form.validateFields((err, values) => {
      if (!err) {
        const user = {
          id: values.id,
          name: values.name,
          age: values.age,
          updateTime: Number(values.updateTime.format('X')) * 1000,
        };
        if (user.name === record.name && user.age === record.age) {
          this.setState({
            showNoUpdate: true,
            confirmLoading: false,
          });
          return;
        }
        updateUser({ user });
        this.setState({
          visible: false,
          confirmLoading: false,
        });
      }
    });
  }
  handleCancel = () => {
    this.setState({
      visible: false,
      confirmLoading: false,
      showNoUpdate: false,
      showLog: false,
    });
  };
  render() {
    const { id, name, age, updateTime } = this.props.record;
    const newDate = new Date(updateTime);

    const { visible, confirmLoading,
      foramtDate, foramtDateUtils,
      showNoUpdate, showLog } = this.state;

    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    const { getFieldDecorator, resetFields } = this.props.form;
    return (
      <div>
        <Button
          type="primary" onClick={() => {
            this.setState({
              visible: true,
            });
            resetFields();
          }}
        >Edit</Button>
        <Modal
          title="修改用户"
          visible={visible}
          onOk={this.handleOk}
          confirmLoading={confirmLoading}
          onCancel={this.handleCancel}
        >
          <Form onSubmit={this.handleOk}>
            <FormItem
              {...formItemLayout}
              label="编号"
            >
              {getFieldDecorator('id', {
                initialValue: id,
              })(
                <Input disabled />,
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="姓名"
            >
              {getFieldDecorator('name', {
                rules: [{ required: true }],
                initialValue: name,
              })(
                <Input
                  onChange={this.onChange}
                  placeholder="Enter your userName"
                  prefix={<Icon type="user" />}
                />,
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="年龄"
            >
              {getFieldDecorator('age', {
                initialValue: age,
              })(
                <InputNumber onChange={this.onChange} min={0} max={100} />,
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="更新时间"
            >
              {getFieldDecorator('updateTime', {
                initialValue: moment(DateUtils.dateFtt(foramtDateUtils, newDate), foramtDate),
              })(
                <DatePicker
                  showTime
                  format={foramtDate}
                  disabled
                />,
              )}
            </FormItem>
            <Alert message="未做任何更改" showIcon style={{ display: showNoUpdate ? 'block' : 'none' }} />
            <Alert message="系统异常，联系管理员" type="error" showIcon style={{ display: showLog ? 'block' : 'none' }} />
          </Form>
        </Modal>
      </div>
    );
  }
}

export default Form.create()(UpdateUser);
